Page{
  background:#dedede;
  padding: 2rpx 0 0 0;
  height: 100%;
}
.container{
  position: relative;
  padding: 0;
  display: inline-block;
  height: 100%;
}
.container .top{
  margin-top: 8rpx;
  width: 750rpx;
  color: #5f5f5f;
  text-align: center;
  display: flex;
  font-size:32rpx;
}
.container .top .mid_card{
  flex: 1;
  padding: 19rpx 0;
  background: #fff;
}
.active{
  border-top: 1px solid #ff4e00;
  border-bottom: 1px solid #ff4e00;
  color: #ff4e00;
}
.container .top .mid_card:nth-of-type(2){
  position: relative;
}
.container .top .mid_card:nth-of-type(2)::before{
  content: "";
  display: inline-block;
  width: 1px;
  height: 40rpx;
  background: #dedede;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.container .top .mid_card:nth-of-type(2)::after{
  content: "";
  display: inline-block;
  width: 1px;
  height: 40rpx;
  background: #dedede;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.container .mid{
  width: 702rpx;
  margin: 15rpx auto 0;
}
.container .mid .cards{
  width: 702rpx;
  height: 151rpx;
  background: #fff;
  clear: both;
  border-radius: 8px;
  margin-bottom: 15rpx;
}
.mid .cards .card_pic{
  width: 74rpx;
  height: 74rpx;
  float: left;
  margin: 36rpx 39rpx 0 28rpx;
}
.mid .cards .card_type{
  display: inline-block;
  font-size: 35rpx;
  margin-top: 36rpx;
  /* width: 400rpx; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mid .cards .card_type .time{
  font-size: 30rpx;
}
.mid .cards .card_discount{
  font-size: 60rpx;
  max-width: 150rpx;
  float: right;
  margin: 36rpx 39rpx 0 0;
}
.container .mask{
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0,0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.container .mask .code_content{
  width: 660rpx;
  height: 600rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.container .code_content .mask_bg{
  width: 660rpx;
  height: 600rpx;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.container .mask .user_head{
  width: 177rpx;
  height: 178rpx;
  position: absolute;
  top: -120rpx;
  left: 50%;
  transform: translate(-50%);
}
.container .mask .name{
  text-align: center;
  padding-bottom: 18rpx;
  width: 95%;
  position: absolute;
  top: 90rpx;
  left: 50%;
  transform: translate(-50%);
  border-bottom: 1px solid #000;
}
.container .mask .now_use{
  position: absolute;
  top: 170rpx;
  left: 50%;
  transform: translate(-50%);
}
.container .mask .code{
  width: 316rpx;
  height: 310rpx;
  position: absolute;
  bottom: 44rpx;
  left: 50%;
  transform: translate(-50%);
}
.container .logo{
  position: absolute;
  bottom: 61rpx;
  left: 50%;
  transform: translate(-50%);
  width: 184rpx;
  height: 68rpx;
}